<template>
  <div class="confirm_dialog" v-if="visible">
    <!-- 分享弹窗主体 -->
    <div class="confirm_content">
      <div class="title">您确定更改谷歌验证吗？</div>
      <div class="text font_color">
        为了保护您的资产安全，更改或解绑验证后该账户将禁止支付服务，提币和C2C卖币24小时，已确保您的账户安全。
      </div>
      <div class="opt_btns">
        <div class="cancel_btn" @click="visible = false">取消</div>
        <div class="primary_btn" @click="goPage">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

// 获取路由信息
const router = useRouter();
// 是否显示
const visible = ref(false);

// 前往指定页
const goPage = () => {
  sessionStorage.setItem("curStep","1")
  router.push("/profile/security/googleAuth/updateAuth");
};

defineExpose({
  visible,
});
</script>

<style lang="scss" scoped>
.confirm_dialog {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  .confirm_content {
    width: 80vw;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 25px 20px;
    color: #000;
    .title {
      text-align: center;
    }
    .text {
      margin-top: 30px;
      font-size: 14px;
    }
    .opt_btns {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      div {
        width: 45%;
        border-radius: 10px;
        padding: 10px 0;
        text-align: center;
      }
    }
  }
}
</style>
